import React from 'react';
import { AnimatePresence } from 'framer-motion';
import './styles.css';
import { Item } from './item';
import { List } from './list';
import { useParams } from 'react-router-dom';

export function Store() {
  const { id } = useParams();
  return (
    <>
      <List selectedId={id} />
      <AnimatePresence>{id && <Item id={id} key="item" />}</AnimatePresence>
    </>
  );
}

export default function App() {
  return (
    <div className="card-container">
      <Store />
    </div>
  );
}
